<template>
	<div class="search-box">
		<div :class="['ipt', { 'ipt-style': isBtn }]">
			<a-input v-model.trim="searchKey" :placeholder="placeholder" allow-clear @clear="handleSearch" @keyup.enter="handleSearch" :class="['search',  { 'style': !isIcon }]" @input="handleInput" :style="{ width: `${width}` }">
				<template #prefix>
					<i class="EachApp EachApp_sousuo1"></i>
				</template>
				<template #suffix v-if="isIcon">
					<span class="tag">Ctrl+K</span>
					<span class="tag"><i class="EachApp EachApp_huiche"></i></span>
				</template>
			</a-input>
		</div>
		<div v-if="isBtn">
			<slot></slot>
		</div>
	</div>
</template>

<script setup lang="ts">
const emit = defineEmits(["handleSearch", "handleInput"]);
const searchKey = ref("");
defineProps({
	placeholder: { type: String, default: () => { return "关键字搜索" }},
	width: { type: Number, default: () => { return '100%' } }, // 是否默认icon
	isIcon: { type: Boolean, default: () => { return true } }, // 是否默认icon
	isBtn: { type: Boolean, default: () => { return false } }, // 是否有新的按钮
	isInput: { type: Boolean, default: () => { return false } }, // 是否修改就触发
});
// 搜索
const handleSearch = () => {
	emit("handleSearch", searchKey.value);
	handleInput();
};

// 搜索-修改就触发
const handleInput = () => {
	emit("handleInput", searchKey.value);
}

defineExpose({
	searchKey
});
</script>

<style lang="scss" scoped>
.search-box{
	display: flex;
	.EachApp_sousuo1 {
		color: #666;
		position: relative;
		z-index: 9;
		font-size: 14px;
	}
	.ipt{
		flex: 1;
		&-style{
			padding-right: 10px;
			.arco-input-wrapper{
				border-right: 1px solid #eee !important;
			}
		}
		:deep(.search) {
			&.arco-input-wrapper {
				height: 32px;
				line-height: 32px;
				position: relative;
				background-color: #fbfbfb;
				border: 1px solid #eee;
				box-shadow: initial;
				// border-right: 0;
				color: #86909c;
				padding: 0 10px;
				border-radius: 4px;
				.arco-input-prefix{
					padding-right: 5px;
				}
				.arco-input{
					font-size: 12px;
				}
			}
			.arco-input-suffix{
				background-color: #fbfbfb;
				border-left: 0;
				box-shadow: initial;
				padding: 0;
				display: flex;
				align-items: center;
				.tag {
					box-shadow: 0px 1px 1px rgba(201, 205, 212, 0.6);
					background: white;
					display: inline-block;
					margin-left: 10px;
					border-radius: 6px;
					padding: 0 6px;
					font-size: 10px;
					height: 18px;
					line-height: 18px;
					margin-top: -1px;
					color: #86909c;
				}
			}
			&.style{
				.arco-input-wrapper{
					border-left: 1px solid #eee;
					border-right: 1px solid #eee;
				}
			}
		}
	}
}
</style>
